<!DOCTYPE html>
<html lang="en-us">
    <head><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'><meta name='description' content='说到 CSS 颜色，相信大家都已熟悉了，本文是我个人对 CSS 颜色体系的一个总结与学习'><title>【CSS进阶】CSS 颜色体系</title>

<link rel='canonical' href='https://example.com/web/post/study/css/'>

<link rel="stylesheet" href="/web/scss/style.min.css"><meta property='og:title' content='【CSS进阶】CSS 颜色体系'>
<meta property='og:description' content='说到 CSS 颜色，相信大家都已熟悉了，本文是我个人对 CSS 颜色体系的一个总结与学习'>
<meta property='og:url' content='https://example.com/web/post/study/css/'>
<meta property='og:site_name' content='逸曦穆泽'>
<meta property='og:type' content='article'><meta property='article:section' content='Post' /><meta property='article:tag' content='JavaScript' /><meta property='article:tag' content='数学' /><meta property='article:published_time' content='2021-10-24T00:00:00&#43;00:00'/><meta property='article:modified_time' content='2021-10-24T00:00:00&#43;00:00'/><meta property='og:image' content='https://example.com/web/post/images/2021/10-study1.jpg' />
<meta name="twitter:title" content="【CSS进阶】CSS 颜色体系">
<meta name="twitter:description" content="说到 CSS 颜色，相信大家都已熟悉了，本文是我个人对 CSS 颜色体系的一个总结与学习"><meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content='https://example.com/web/post/images/2021/10-study1.jpg' />
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/niceFutrue/happyacomma/logo/logo-rbg.png" />

    </head>
    <body class="
    article-page has-toc
">
    <script>
        (function() {
            const colorSchemeKey = 'StackColorScheme';
            if(!localStorage.getItem(colorSchemeKey)){
                localStorage.setItem(colorSchemeKey, "auto");
            }
        })();
    </script><script>
    (function() {
        const colorSchemeKey = 'StackColorScheme';
        const colorSchemeItem = localStorage.getItem(colorSchemeKey);
        const supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches === true;

        if (colorSchemeItem == 'dark' || colorSchemeItem === 'auto' && supportDarkMode) {
            

            document.documentElement.dataset.scheme = 'dark';
        } else {
            document.documentElement.dataset.scheme = 'light';
        }
    })();
</script>
<div class="container main-container flex 
    
        extended
    
">
    
        <div id="article-toolbar">
            <a href="/web" class="back-home">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <polyline points="15 6 9 12 15 18" />
</svg>



                <span>Back</span>
            </a>
        </div>
    
<main class="main full-width">
    <article class="has-image main-article">
    <header class="article-header">
        <div class="article-image">
            <a href="/web/post/study/css/">
                
                    <img src="/web/post/images/2021/10-study1.jpg" loading="lazy" alt="Featured image of post 【CSS进阶】CSS 颜色体系" />
                
            </a>
        </div>
    

    <div class="article-details">
    
    <header class="article-category">
        
            <a href="/web/categories/study/" >
                study
            </a>
        
    </header>
    

    <h2 class="article-title">
        <a href="/web/post/study/css/">【CSS进阶】CSS 颜色体系</a>
    </h2>

    
    <h3 class="article-subtitle">
        说到 CSS 颜色，相信大家都已熟悉了，本文是我个人对 CSS 颜色体系的一个总结与学习
    </h3>
    

    
    <footer class="article-time">
        
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" />
  <circle cx="18" cy="18" r="4" />
  <path d="M15 3v4" />
  <path d="M7 3v4" />
  <path d="M3 11h16" />
  <path d="M18 16.496v1.504l1 1" />
</svg>
                <time class="article-time--published">Oct 24, 2021</time>
            </div>
        

        
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <polyline points="12 7 12 12 15 15" />
</svg>



                <time class="article-time--reading">
                    1 minute read
                </time>
            </div>
        
    </footer>
    
</div>
</header>

    <section class="article-content">
    <p>说到 CSS 颜色，相信大家都已熟悉了，本文是个人对 CSS 颜色体系的一个总结与学习，当然，可能会有一些缺失的地方，如果有，请多多指教，本人会去补全的。</p>
<h4 id="css-颜色体系">CSS 颜色体系</h4>
<ol>
<li>色彩关键字</li>
<li>transparent &ndash; 透明</li>
<li>currentColor &ndash; 原始 color 值（是 CSS3 新增的，老版本浏览器下是无法识别的）</li>
<li>rgb() 与 rgba()</li>
<li>hsl() 与 hsla()</li>
</ol>
<h5 id="色彩关键字-所有浏览器都支持的颜色名httpswwww3schoolcomcncssrefcss_colorsasp">色彩关键字 （<a class="link" href="https://www.w3school.com.cn/cssref/css_colors.asp"  target="_blank" rel="noopener"
    >所有浏览器都支持的颜色名</a>）</h5>
<ul>
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
<h5 id="transparent----透明">transparent &ndash; 透明</h5>
<p>transparent 的字面意思就是透明。用来表示一个完全透明的颜色，即该颜色看上去是背景色。也可以理解为它是 rgba(0,0,0,0) 的简写。</p>
<h5 id="currentcolor----原始-color-值">currentColor &ndash; 原始 color 值</h5>
<p>很多人还不知道有 currentColor 这个东西。其和 transparent 一样，也是一个关键字，顾名思义，它表示为当前颜色。它来自自身属性或者继承于它的父属性。可以简单的理解为当前 CSS 标签所继承或设定的文本颜色，即 color 的值。使用这个关键字可以很好的减少改动 CSS 时的工作量，比如：（当然，还有另一种变量的方式，后续会说的）</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="nt">div</span> <span class="p">{</span>
    <span class="k">width</span><span class="p">:</span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span><span class="k">line-height</span><span class="p">:</span><span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">font-size</span><span class="p">:</span><span class="mi">21</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">text-align</span><span class="p">:</span><span class="kc">center</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">red</span><span class="p">;</span> <span class="c">/* 红色文本色 */</span>
    <span class="k">border</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">solid</span> <span class="n">currentcolor</span><span class="p">;</span> <span class="c">/* 红色边框色 */</span>
<span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>currentColor<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div><h5 id="rgb-与-rgba">rgb() 与 rgba()</h5>
<p>rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式，rgba() 多一个 a ，表示其透明度，取值为 0-1。 rgb(255,255,255) &gt;
rgb(RR,GG,BB) 的写法，RR 取值 0~255 或者百分比，255 相当于 100%，和十六进制符号里的 F 或 FF ,RR 表示红色的深浅，那么理解记忆 #FF0000 表示为红色就简单了，同理可以知道 #00FF00 表示绿色， #0000FF表示蓝色。</p>
<h5 id="hsl-与-hsla">hsl() 与 hsla()</h5>
<p>颜色还可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla() 多一个 a ，表示其透明度，取值为 0-1。hsl 相比 rgb 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。</p>
<ul>
<li>色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。</li>
<li>饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。</li>
<li>明度（V），亮度（L），取0-100%。</li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
    <span class="nt">div</span><span class="p">{</span>
        <span class="k">width</span><span class="p">:</span><span class="mi">200</span><span class="kt">px</span><span class="p">;</span>
        <span class="k">line-height</span><span class="p">:</span><span class="mi">60</span><span class="kt">px</span><span class="p">;</span>
        <span class="k">font-size</span><span class="p">:</span><span class="mi">21</span><span class="kt">px</span><span class="p">;</span>
        <span class="k">text-align</span><span class="p">:</span><span class="kc">center</span><span class="p">;</span>
        <span class="k">color</span><span class="p">:</span><span class="nb">hsl</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">50</span><span class="kt">%</span><span class="p">,</span> <span class="mi">60</span><span class="kt">%</span><span class="p">);</span>
        <span class="k">background</span><span class="p">:</span><span class="nb">hsl</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">60</span><span class="kt">%</span><span class="p">,</span> <span class="mi">60</span><span class="kt">%</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>hsl<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
</section>


    <footer class="article-footer">
    
    <section class="article-tags">
        
            <a href="/web/tags/javascript/">JavaScript</a>
        
            <a href="/web/tags/%E6%95%B0%E5%AD%A6/">数学</a>
        
    </section>


    
    <section class="article-copyright">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copyright" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <circle cx="12" cy="12" r="9" />
  <path d="M14.5 9a3.5 4 0 1 0 0 6" />
</svg>



        <span>Licensed under CC BY-NC-SA 4.0</span>
    </section>
    </footer>


    
        <link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css"integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn"crossorigin="anonymous"
            ><script 
                src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js"integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8"crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js"integrity="sha384-vZTG03m&#43;2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"crossorigin="anonymous"
                defer="true"
                >
            </script><script>
    window.addEventListener("DOMContentLoaded", () => {
        renderMathInElement(document.querySelector(`.article-content`), {
            delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "$", right: "$", display: false },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true }
            ]
        });})
</script>
    
</article>

    <aside class="related-contents--wrapper">
    
    
        <h2 class="section-title">Related contents</h2>
        <div class="related-contents">
            <div class="flex article-list--tile">
                
                    
<article class="has-image">
    <a href="/web/post/study/math/">
        
        
            <div class="article-image">
                
                    <img src="/web/post/images/2021/10-study1.jpg" loading="lazy" data-key="" data-hash="/web/post/images/2021/10-study1.jpg"/>
                
            </div>
        

        <div class="article-details">
            <h2 class="article-title">数学排版</h2>
        </div>
    </a>
</article>
                
            </div>
        </div>
    
</aside>

     
    
        
    <div class="disqus-container">
    <div id="disqus_thread"></div>
<script type="application/javascript">
    var disqus_config = function () {
    
    
    
    };
    (function() {
        if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
            document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
            return;
        }
        var d = document, s = d.createElement('script'); s.async = true;
        s.src = '//' + "hugo-theme-stack" + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>

<style>
    .disqus-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
        color: var(--card-text-color-main);
    }
</style>

<script>
    
    
    
    
    
    
    
</script>

    

    <footer class="site-footer">
    <section class="copyright">
        &copy; 
        
            2020 - 
        
        2021 逸曦穆泽
    </section>
    
    <section class="powerby">
        Built with <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> <br />
        Theme <b><a href="https://github.com/CaiJimmy/hugo-theme-stack" target="_blank" rel="noopener" data-version="3.2.0">Stack</a></b> designed by <a href="https://jimmycai.com" target="_blank" rel="noopener">Jimmy</a>
    </section>
</footer>


    
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    
    <div class="pswp__bg"></div>

    
    <div class="pswp__scroll-wrap">

        
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                
                
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"integrity="sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo="crossorigin="anonymous"
                defer="true"
                >
            </script><script 
                src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"integrity="sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU="crossorigin="anonymous"
                defer="true"
                >
            </script><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css"integrity="sha256-c0uckgykQ9v5k&#43;IqViZOZKc47Jn7KQil4/MP3ySA3F8="crossorigin="anonymous"
            ><link 
                rel="stylesheet" 
                href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css"integrity="sha256-SBLU4vv6CA6lHsZ1XyTdhyjJxCjPif/TRkjnsyGAGnE="crossorigin="anonymous"
            >

            </main>
    
        <aside class="sidebar right-sidebar sticky">
            <section class="widget archives">
                <div class="widget-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <line x1="5" y1="9" x2="19" y2="9" />
  <line x1="5" y1="15" x2="19" y2="15" />
  <line x1="11" y1="4" x2="7" y2="20" />
  <line x1="17" y1="4" x2="13" y2="20" />
</svg>



                </div>
                <h2 class="widget-title section-title">Table of contents</h2>
                
                <div class="widget--toc">
                    <nav id="TableOfContents">
  <ol>
    <li>
      <ol>
        <li>
          <ol>
            <li><a href="#css-颜色体系">CSS 颜色体系</a></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</nav>
                </div>
            </section>
        </aside>
    

        </div>
        <script 
                src="https://cdn.jsdelivr.net/npm/node-vibrant@3.1.5/dist/vibrant.min.js"integrity="sha256-5NovOZc4iwiAWTYIFiIM7DxKUXKWvpVEuMEPLzcm5/g="crossorigin="anonymous"
                defer="false"
                >
            </script><script type="text/javascript" src="/web/ts/main.js" defer></script>
<script>
    (function () {
        const customFont = document.createElement('link');
        customFont.href = "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap";

        customFont.type = "text/css";
        customFont.rel = "stylesheet";

        document.head.appendChild(customFont);
    }());
</script>

    </body>
</html>
